<template>
    <div class="grid grid-rows-4 h-[100px] w-[120px] m-2
                flex flex-col items-center 
                bg-white rounded-xl bg-opacity-2 relative
				hover:bg-opacity-10" @click="listenClick">
        <!-- <el-icon class="badge z-5 absolute text-white top-3 right-3 hidden"><Select /></el-icon> -->
        <div class="row-span-3 p-4 pb-2
                w-auto h-[85px] max-w-full max-h-full">
            <img class="w-auto h-[80px] max-w-full max-h-full"
                :src="dataUrl"/>
        </div>
        <div class="row-span-1">
            <p class="text-gray text-8px 
                    mt-0 w-full pl-5 pr-5 text-center leading-tight
                    truncate break-words whitespace-normal">
                    {{ title }}</p>
        </div>
	</div>
</template>

<script setup>
import { ElIcon} from 'element-plus';
import { Select} from '@element-plus/icons-vue';
import {onMounted, ref } from 'vue';

const props = defineProps({
    title: String,
    imgUrl: String,
    type: String
});

const dataUrl = ref('');

const createBlob = function() {
    if (props.type == "audio/mpeg"){
        dataUrl.value = "http://localhost:8080/" + "Hunter.jpg";
    }else{
        dataUrl.value = "http://localhost:8080/" + props.title.split(".")[0] + '/' + props.imgUrl;
    }
}
//-------------------------------------------
const emits = defineEmits(['clickEvent']);
const listenClick = ()=>{
    emits('clickEvent', dataUrl.value.replace('FirstFrame_','').replace('.png', '.mp4'));
}

onMounted(() => {
    createBlob();
});
</script>